<template>
	<view class="create">
		<view class="formsBox">
			<uni-forms ref="form" :modelValue="formData" :label-width="100">
				<block v-for="(item,index) in formArr">
					<block v-if="item.type == 'input'">
						<uni-forms-item :label="item.titles" :name="item.field" :rules="[{'required': true,errorMessage: '请选择'+item.titles}]">
							<uni-easyinput :disabled="item.props && item.props.readonly ? true : (processId !== '' ? true : false)" type="text" v-model="formData[item.field]" :placeholder="item.$required ? item.$required : ''" />
						</uni-forms-item>
					</block>
					<block v-if="item.type == 'datePicker'">
						<uni-forms-item :label="item.titles" :name="item.field" :rules="[{'required': true,errorMessage: '请选择'+item.titles}]">
							<!-- <uni-easyinput :disabled="item[1].props ? item[1].props.readonly : false" type="text" v-model="item[1].value" :placeholder="item[1].$required ? item[1].$required : ''" /> -->
							<uni-datetime-picker :disabled="!!processId" type="datetime" v-model="formData[item.field]" return-type="string" :placeholder="'请选择'+item.titles" />
						</uni-forms-item>
					</block>
					<block v-if="item.type == 'DictSelect'">
						<uni-forms-item :label="item.titles" :name="item.field" :rules="[{'required': true,errorMessage: '请选择'+item.titles}]">
							<uni-data-select
								v-model="formData[item.field]"
								:placeholder="'请选择'+item.titles"
								:localdata="item.option"
							></uni-data-select>
						</uni-forms-item>
					</block>
					<block v-if="item.type == 'OaDeptSelect'">
						<uni-forms-item :label="item.titles" :name="item.field" :rules="[{'required': true,errorMessage: '请选择'+item.titles}]">
							<deptSelect :disabled="!!processId" v-model="formData[item.field]" :isId="true" />
						</uni-forms-item>
					</block>
				</block>
			</uni-forms>
		</view>
		<view class="buttonBox" v-if="!processId">
			<button class="button" @click="submit" type="primary">提交</button>
		</view>
	</view>
</template>

<script>
	import deptSelect from '@/components/user/deptSelect.vue'
	import {useVacation,getOaUser} from '@/api/user/userApi.js'
	
	import {getApprovalDetail} from '@/api/oa/common.js'
	import {getIntDictOptions} from '@/utils/auth.js'
	import {createProcessInstance} from '@/api/bpm/processInstance/index.js'
	export default {
		components:{
			deptSelect,
		},
		props:{
			processId:{
				type:String,
				default:''
			},
			approvalInfo:{}
		},
		watch:{
			approvalInfo(val){
				this.formFields = JSON.parse(val.processDefinition.formFields[1]);
				this.formFieldsChange()
				console.log(val)
				this.formData = val.processInstance.formVariables;
				
			},
			// 'formData.deptId':{
			// 	async handler(val){
			// 		// 根据id获取可是负责人
			// 		if(val.leaderUserId){
			// 			let info = await getOaUser(val.leaderUserId)
			// 			this.leaderName = info.data.name;
			// 			this.formData.leaderId = info.data.id;
			// 		}else{
			// 			this.leaderName = '';
			// 		}
			// 	}
			// }
		},
		data() {
			return {
				formData:{},
				// 表单内容
				formFields:{},
				formArr:[],
				processDefinitionId:'',
			};
		},
		methods:{
			// 点击提交
			submit(){
				uni.showLoading()
				this.$refs.form.validate().then(async res => {
					try{
						let obj = {
							processDefinitionId:this.processDefinitionId,
							startUserSelectAssignees:{},
							variables:this.formData
						}
						let info = await createProcessInstance(obj);
						console.log(info)
						uni.hideLoading()
						uni.showToast({
							title:'发起成功',
							icon:'none',
							success: () => {
								setTimeout(()=>{
									uni.redirectTo({
										url:'/pages/work/approvalCenter/taskMy'
									})
								},1500)
							}
						})
					}catch(err){
						console.log(err)
						uni.hideLoading()
					}
				}).catch(err => {
					uni.hideLoading()
					console.log('表单错误信息：', err);
				})
			},
			formFieldsChange(){
				let formArr = [];
				const result = [];
				for (let i = 0; i < this.formFields.children.length; i += 2) {
				  result.push(this.formFields.children.slice(i, i + 2));
				}
				result.forEach(async (item,index)=>{
					let obj = {...item[1]};
					obj.titles = item[0].children[0]
					formArr.push(obj)
					this.$set(this.formData,item[1].field,'')
					if(item[0].children[0] == "发起人"){
						this.$set(this.formData,item[1].field,this.$store.state.user.name)
					}
					// 判断是否调用接口
					if(item[1].type == "ApiSelect"){
						// 调用接口
						let data = await request({
							url: item.props.url,
							'method':item.method
						});
						let option =  data.data.map(item=>{
							return {
								text:item.licensePlate ? item.licensePlate : item.name,
								value:item.id
							}
						})
						obj.option = option;
					}
					// 字典接口
					if(item[1].type == "DictSelect"){
						// 调用接口
						let option = await getIntDictOptions(item[1].props.dictType);
						this.$set(this.formArr[index],'option',option);
					}
				})
				this.formArr = formArr;
				console.log(this.formArr)
			},
		},
		async onLoad(option) {
			console.log(option)
			this.processDefinitionId = option.id;
			// 获取用章申请表单
			let data = await getApprovalDetail({
				processDefinitionId:option.id,
				activityId:option.simpleModelId
			});
			this.formFields = data.data.processDefinition.formFields[1];
			this.formFields = JSON.parse(this.formFields)
			console.log(this.formFields)
			this.formFieldsChange()
		},
		// mounted() {
			
		// }
	}
</script>

<style lang="less" scoped>
.create{
	width: 100%;
	height: auto;
	padding-top: 20rpx;
	.formsBox{
		width: 100%;
		height: auto;
		background-color: #fff;
		padding: 20rpx;
		box-sizing: border-box;
		.uni-forms-item{
			margin-bottom: 30rpx;
		}
		.itemBox{
			.btnBoxs{
				display: flex;
				align-items: center;
			}
		}
	}
	.buttonBox{
		width: 100%;
		height: auto;
		padding: 0 20rpx;
		box-sizing: border-box;
		margin-top: 40rpx;
	}
}
</style>
